<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/administerhome' }" class="breadCrumb">首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>看护关系管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="bed-management-main">
      <!-- <div class="operater-bar">
        <div class="input-select-field">
          <div>
            <el-text class="mx-1">老人姓名：</el-text>
            <el-input v-model="info.eldName" placeholder="请输入姓名" />
          </div>
        </div>
        <div class="btn-field">
          <el-button type="primary" @click="gettable">搜索</el-button>
        </div>
      </div> -->
      <div class="table-field">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="eldId" label="序号" />
          <el-table-column prop="eldName" label="老人姓名" />
          <el-table-column prop="nurseNumber" label="护理人工号" />
          <el-table-column prop="nurseName" label="护理人姓名" />
          <el-table-column prop="operator" label="操作" width="200">
            <template #default="scope">
              <el-button type="success" @click="bindShow(scope.row)">
                绑定
              </el-button>
              <el-button type="danger" @click="unbindShow(scope.row)">
                解绑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog v-model="bindDialogVisible" title="绑定护理人员" width="60%">
      <el-table :data="nursetableData" border stripe style="width: 100%">
        <el-table-column prop="nurseId" label="序号" />
        <el-table-column prop="nurseNumber" label="工号" />
        <el-table-column prop="nurseName" label="姓名" />
        <el-table-column prop="nurseIntime" label="入职时间" />
        <el-table-column prop="bindingState" label="绑定状态" />
        <el-table-column prop="nurseWorkstate" label="工作状态" />
        <el-table-column prop="operator" label="操作" width="200">
          <template #default="scope">
            <el-button type="success" @click="bindNurse(scope.row)">
              绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import * as eldernurse from "@/api/eldernurse.js";
const tableData = ref([]);
const nursetableData = ref([]);

let bindDialogVisible = ref(false);

const rowdetails = ref({});
const bindShow = (row) => {
  getnurse();
  rowdetails.value = JSON.parse(JSON.stringify(row));
  bindDialogVisible.value = true;
};
const gettable = () => {
  eldernurse.getElderNurseAPI().then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: resp.data.message,
      });
      return;
    }
    tableData.value = resp.data.data;
    console.log(resp.data.data);
  });
};
const getnurse = () => {
  eldernurse.getNurseAPI().then((resp) => {
    if (resp.data.code !== 2000) {
      ElMessage({
        type: "error",
        message: resp.data.message,
      });
      return;
    }
    nursetableData.value = resp.data.data.map((item) => ({
      nurseId: item.nurseId,
      nurseNumber: item.nurseNumber,
      nurseName: item.nurseName,
      nurseIntime: item.nurseIntime,
      bindingState: item.bindingState === false ? "未绑定" : "已绑定",
      nurseWorkstate: item.nurseWorkstate === false ? "在职" : "休假",
    }));
  });
};
const bindNurse = (row) => {
  eldernurse
    .bindNurseAPI({
      elderId: rowdetails.value.eldId,
      nurseId: row.nurseId,
    })
    .then((resp) => {
      if (resp.data.code !== 2000) {
        ElMessage({
          type: "error",
          message: resp.data.message,
        });
        return;
      }
      eldernurse.modNurseBindStateAPI({ nurseId: row.nurseId }).then((res) => {
        if (res.data.code !== 2000) {
          ElMessage({
            type: "error",
            message: res.data.message,
          });
          return;
        }
        ElMessage({
          type: "success",
          message: res.data.message,
        });
        bindDialogVisible.value = false;
        gettable();
      });
    });
};

const unbindShow = (row) => {
  ElMessage({
    type: "error",
    message: "暂时无法解绑",
  });
};

onMounted(() => {
  gettable();
});
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}

.bed-management-main {
  width: 1175px;
  height: 575px;
}

.operater-bar {
  width: 100%;
  flex-direction: row;
  display: flex;
}

.input-select-field {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 750px;
}

.table-field {
  width: 100%;
  margin-top: 15px;
}

.el-input {
  width: 150px;
}

.el-select {
  width: 150px;
}

.btn-field {
  width: 350px;
  display: flex;
  justify-content: flex-end;

  >.el-button {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>
